<template>
	<view class="purchase-page">
		<!-- 配送地址 -->
		<view class="section address">
			<text class="title">配送地址：</text>
			<text class="address-detail">{{ address }}</text>
			<text class="contact">联系人：{{ contactPerson }}</text>
			<text class="phone">手机号：{{ phone }}</text>
		</view>

		<!-- 商品详情 -->
		<view class="section products">
			<view class="product-item" v-for="(item, index) in order.products" :key="index">
				<image :src="item.image" class="product-image"></image>
				<view class="product-info">
					<!-- 商品名字 -->
					<text class="product-name">{{ item.name }}</text>
					<!-- 数量 -->
					<text class="product-quantity">x{{ item.quantity }}</text>
				</view>
				<!-- 价格 -->
				<text class="product-price">￥{{ item.price }}</text>
			</view>
		</view>

		<!-- 费用详情 -->
		<view class="section cost-summary">
			<view class="row">
				<text>商品金额</text>
				<text>￥{{ order.totalAmount }}</text>
			</view>
			<view class="row">
				<text>优惠券</text>
				<image class="arrow" src="/static/motif/xiayibu1.png"></image>
			</view>
			<view class="row">
				<text>运费</text>
				<text>￥{{ deliveryFee }}</text>
			</view>
		</view>

		<!-- 订单状态 -->
		<view class="section order-status">
			<text class="title">订单状态</text>
			<text>{{ order.status }}</text>
		</view>

		<!-- 支付方式 -->
		<view class="section payment-method">
			<text class="title">支付方式</text>
			<radio-group>
				<label class="radio-item" v-for="method in paymentMethods" :key="method.value">
					<radio :value="method.value" v-model="selectedPayment" @click="handlea(method.label)">{{ method.label }}
					</radio>
				</label>
			</radio-group>
		</view>

		<!-- 订单备注 -->
		<view class="section order-remarks">
			<text class="title">订单备注</text>
			<textarea v-model="remarks" class="remarks-input" placeholder="请输入备注信息..." maxlength="200"></textarea>
		</view>

		<!-- 固定底部支付按钮 -->
		<view class="footer-fixed">
			<text class="total">应付: ￥{{ subtotal }}</text>
			<button class="pay-btn" @click="goToPay">去支付</button>
		</view>
	</view>
</template>

<script>
	import {
		getAddres
	} from '@/api/address.js'

	import {
		setTOrders,
		updataTOrders
	} from '@/api/shopping.js'
	export default {
		data() {
			return {
				order: {}, // 存储传递的订单数据
				address: "", // 地址详细信息
				contactPerson: "", // 联系人姓名
				phone: "", // 联系人手机号
				productInfoList: [], // 购买的产品展示
				deliveryFee: 5.00, // 运费
				subtotal: 0, // 应付
				remarks:'',
				paymentMethods: [ // 选择支付
					{
						label: "微信支付",
						value: "wechat"
					},
					{
						label: "支付宝支付",
						value: "alipay"
					},
					{
						label: "余额抵扣",
						value: "balance"
					}
				],
				selectedPayment: "", // 选择付款方式
				remarks: "", // 备注
			};
		},
		methods: {
			onLoad(options) {
				console.log('获取到的 orderData:', options.orderData);
				// 检查 orderData 是否存在且有效
				if (options.orderData) {
					try {
						this.order = JSON.parse(decodeURIComponent(options.orderData));
						console.log('解析后的订单数据:', this.order); // 打印解析后的订单数据
						console.log(this.deliveryFee)
						// 设置应付金额
						this.subtotal = parseFloat(this.order.totalAmount) + parseFloat(this.deliveryFee)

					} catch (e) {
						uni.showToast({
							title: '订单数据无效',
							icon: 'none',
						});
						console.error('解析订单数据时出错:', e); // 打印错误信息
					}
				} else {
					// 处理 orderData 缺失的情况
					uni.showToast({
						title: '订单数据缺失',
						icon: 'none',
					});
				}
				// 获取地址信息
				this.getadderslist();
			},
			getadderslist() {
				getAddres({
					userId: this.$cookies.get("id")
				}).then(res => {
					console.log(res.data);
					if (res.data) {
						this.address = res.data.provinceCityDistrict + res.data.fullAddress;
						this.contactPerson = res.data.username;
						this.phone = res.data.userphone;
					}
				}).catch(error => {
					console.error("获取地址失败", error);
				});
			},
			handlea(a) {
				this.selectedPayment = a
			},
			// 提交支付请求
			goToPay() {
				if (!this.selectedPayment) {
					uni.showToast({
						title: "请选择支付方式",
						icon: "none",
					});
					return;
				}
				
				if (this.selectedPayment == "支付宝支付") {
					setTOrders({
						userId: this.$cookies.get("id"),
						userAddress: this.address,
						totalAmount: this.subtotal,
						ordersState: "0",
						  notes:this.remarks||"无"
					}).then(res => {
					     uni.showToast({
					     	title: '订单生成成功',
					     	icon: 'success',
					     });
							
							 uni.navigateTo({
							 	      url: '/pages/login/testpay/testpay?' + 'traceNo=' + res.data.ordersId + '&totalAmount=' + res.data.totalAmount
							 	
							 })
					})
					updataTOrders({
						 paymentMethod:this.selectedPayment,
							ordersState:"2",
					}).then(res=>{
						uni.showToast({
							title: '支付成功',
							icon: 'success',
						});
					})
					
				} else if (this.selectedPayment == "微信支付") {
					alert(3333)
				} else if (this.selectedPayment == "余额抵扣") {
					alert(4444)
				}
			},
		},
	};
</script>

<style>
	.purchase-page {
		background-color: #f8f8f8;
		padding-bottom: 120rpx;
	}

	.section {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.address .title,
	.payment-method .title,
	.order-remarks .title {
		font-size: 28rpx;
		font-weight: bold;
	}

	.contact,
	.phone {
		display: flex;
		font-size: 28rpx;
		color: #555;
		margin-top: 10rpx;
	}

	.products .product-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.product-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.product-info {
		flex: 1;
	}

	.arrow {
		width: 16px;
		height: 16px;
	}

	.product-name {
		font-size: 28rpx;
	}

	.product-quantity {
		color: #999;
		font-size: 24rpx;
	}

	.product-price {
		font-size: 28rpx;
		font-weight: bold;
	}

	.cost-summary .row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.payment-method .radio-item {
		margin: 10rpx 0;
		font-size: 26rpx;
	}

	.order-remarks .remarks-input {
		width: 100%;
		height: 120rpx;
		border: 1px solid #ccc;
		border-radius: 10rpx;
		padding: 10rpx;
		font-size: 26rpx;
	}

	.footer-fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
		z-index: 100;
	}

	.total {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.pay-btn {
		background-color: #e60012;
		color: #fff;
		padding: 15rpx 30rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
	}
</style>